<template>
  <div class="detl_cont">
    <img v-lazy="https(info.coverurl)" alt="">
    <div class="infos_detl">
      <p class="title_detl">{{info.title}}</p>
      <div class="from_time clearfix">
        <a v-if="!insq" :href="info.link" target="_blank" class="from_detl">From:{{info.publishername}}</a>
        <span class="time_detl" :class='{insq:insq}'>{{info.publishtime}}</span>
        <span v-if="insq" @click="favArticle()">
          <em :class="{'ico-heart-yell':!info.isfavor,'ico-heart-favoryell':info.isfavor}"></em>
        </span>
      </div>
      <div class="cons_detl" v-html="https(info.content)"></div>
    </div>
  </div>
</template>
<script>
import { FavorArticle } from '../../../common/api/userFavor'
import { mapGetters } from 'vuex'
export default {
  props: {
    info: Object
  },
  computed: {
    ...mapGetters(['insq'])
  },
  methods: {
    favArticle() {
      //   console.log(this.info)
      var postData = {
        ArticleId: this.info.id,
        IsCancel: this.info.isfavor
      }
      var errormsg = ''
      FavorArticle(postData)
        .then(res => {
          this.info.isfavor = !this.info.isfavor
          errormsg = (this.info.isfavor ? '' : '取消') + '收藏成功'
          this.toast(errormsg)
        })
        .catch(err => {
          console.log('err', err)
          this.toast(err.msg)
        })
    }
  }
}
</script>
<style scoped>
.detl_cont img {
  width: 100%;
}

.detl_cont .infos_detl {
  padding: 0.875rem;
}

.detl_cont .title_detl {
  display: -webkit-box;
  font-size: 20px;
  color: #000;
  margin-bottom: 0.875rem;
  max-height: 60px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.detl_cont .from_time {
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #eee;
}

.detl_cont .from_time > span {
  float: left;
  font-size: 0.75rem;
}

.detl_cont .from_time > span:last-child {
  float: right;
  text-align: right;
}
</style>
<style>
.cons_detl .image-link {
  width: 50vw !important;
  height: auto !important;
}
.cons_detl .image-link > img {
  width: 100% !important;
  height: auto !important;
}
</style>
